<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Listview Integration Test</title>

	<script src="../../../jquery.js"></script>
	<script src="../jquery.setNameSpace.js"></script>
	<script src="../../../jquery.mobile-1.0.min.js"></script>
	<script src="../../jquery.testHelper.js"></script>
	<link rel="stylesheet"  href="../../../jquery.mobile-1.0.min.css" />
	<link rel="stylesheet" href="../../../external/qunit.css"/>
	<script src="../../../external/qunit.js"></script>

	<script src="listview_core.js"></script>

	<script src="../swarminject.js"></script>
</head>
<body>

<h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>

<!-- Basic Linked view test -->
<div data-nstest-role="page" id='basic-linked-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li><a href="#basic-link-results">Home</a></li>
			<li><a href="#basic-link-results">Back</a></li>
			<li><a href="#basic-link-results">Return</a></li>
			<li><a href="#nested-list-test" id="nested-list-test-anchor">Nested List Test</a></li>
		</ul>
	</div>
  <a href="cache-tests/nested.html" id="cached-tests"></a>
</div>

<div data-nstest-role='page' id='basic-link-results'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Results</h1>
	</div>
</div>

<!-- Nested List -->
<div data-nstest-role="page" id='nested-list-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>Groups of animals
				<ul>
					<li>pod of whales</li>
					<li>quiver of cobras</li>
					<li>troop of baboons</li>
				</ul>
			</li>
			<li class="linebreaknode">

			More animals


				<ul>
					<li>Shoal of Bass</li>
					<li>Rhumba of rattlesnakes</li>
				</ul>
			</li>
		</ul>
	</div>
</div>


<div data-nstest-role="page" id='nested-lists-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic multiple lists view</h1>
	</div>
    <div data-nstest-role="content">
        <ul data-nstest-role="listview" data-nstest-inset="true">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3
                <ul data-nstest-role="listview">
                    <li>Item A-3-0</li>
                    <li>Item A-3-1</li>
                    <li>Item A-3-2</li>
                </ul>
            </li>
        </ul>
        <ul data-nstest-role="listview" data-nstest-inset="true">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3
                <ul data-nstest-role="listview">
                    <li>Item B-3-0
                        <ul data-nstest-role="listview">
							<li>Item B-3-0-0</li>
							<li>Item B-3-0-1
								<ul data-nstest-role="listview">
									<li>Item B-3-0-1-0</li>
									<li>Item B-3-0-1-1</li>
									<li>Item B-3-0-1-2</li>
								</ul>
							</li>
							<li>Item B-3-0-2</li>
						</ul>
                    </li>
                    <li>Item B-3-1
						<ul data-nstest-role="listview">
							<li>Item B-3-1-0</li>
							<li>Item B-3-1-1</li>
							<li>Item B-3-1-2</li>
						</ul>
                    </li>
                    <li>Item B-3-2</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<!-- Numbered List -->
<div data-nstest-role="page" id='numbered-list-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
			<ol data-nstest-role="listview">
				<li><a href="#numbered-list-results">Number 1</a></li>
				<li><a href="#numbered-list-results">Number 2</a></li>
				<li><a href="#numbered-list-results">Number 3</a></li>
			</ol>
	</div>
</div>

<div data-nstest-role='page' id='numbered-list-results'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Numbered List</h1>
	</div>
</div>

<!-- Read only List -->
<div data-nstest-role="page" id='read-only-list-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>Read</li>
			<li>Only</li>
			<li>List</li>
			<li>View</li>
		</ul>
	</div>
</div>

<!-- Split listview -->
<div data-nstest-role="page" id='split-list-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Split List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>
				<a href="#split-list-link1">link one</a>
				<a href="#split-list-link2">link second</a>
			</li>
			<li>
				<a href="#split-list-link1">link one</a>
				<a href="#split-list-link2">link second</a>
			</li>
			<li>
				<a href="#split-list-link1">link one</a>
				<a href="#split-list-link2">link second</a>
			</li>
		</ul>
	</div>
</div>

<div data-nstest-role="page" id='split-list-link1'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Split List view 1</h1>
	</div>
</div>

<div data-nstest-role="page" id='split-list-link2'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Split List view 2</h1>
	</div>
</div>

<!-- List divider -->
<div data-nstest-role="page" id='list-divider-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>List Divider Test</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>a is for aquaman</li>
			<li>b is for batman</li>
			<li data-nstest-role="list-divider">This is a list divider</li>
			<li>c is for catwoman</li>
			<li data-nstest-role="list-divider">This is another list divider</li>
			<li>d is for darkwing</li>
		</ul>
	</div>
</div>

<!-- Search bar filter -->
<div data-nstest-role="page" id='search-filter-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Split List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-filter="true">
			<li>a is for aquaman</li>
			<li>b is for batman</li>
			<li>c is for catwoman</li>
			<li>d is for darkwing</li>
		</ul>
	</div>
</div>

<!-- Search bar filter with list-dividers -->
<div data-nstest-role="page" id='search-filter-with-dividers-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Split List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-filter="true">
			<li data-nstest-role="list-divider">a</li>
			<li>a is for aquaman</li>
			<li data-nstest-role="list-divider">b</li>
			<li>b is for batman</li>
			<li data-nstest-role="list-divider">c</li>
			<li>c is for catwoman</li>
			<li data-nstest-role="list-divider">d</li>
			<li>d is for darkwing</li>
		</ul>
	</div>
</div>

<!-- Search bar filter inset -->
<div data-nstest-role="page" id='search-filter-inset-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Inset Filter List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
			<li>a is for aquaman</li>
			<li>b is for batman</li>
			<li>c is for catwoman</li>
			<li>d is for darkwing</li>
		</ul>
	</div>
</div>

<!-- Programmatically generated list items !-->
<div data-nstest-role="page" id="programmatically-generated-list">
	<ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
</div>

<!-- Removing items from list -->
<div data-nstest-role="page" id='removing-items-from-list-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-inset="true">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</div>
</div>

<!-- Rounded corners inset list with variable items -->
<div data-nstest-role="page" id='corner-rounded-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-inset="true">
		</ul>
	</div>
</div>

<div data-nstest-role="page" id="enhancetest">
	<ul data-nstest-role="listview">
		<li><a href="#basic-link-results">Home</a></li>
		<li><a href="#basic-link-results">Back</a></li>
		<li><a href="#basic-link-results">Return</a></li>
	</ul>
</div>

<div id="list-theme-inherit" data-nstest-theme="b">
  <ul data-nstest-role="listview">
    <li>foo</li>
  </ul>
</div>

<div data-nstest-role="page" id="ui-li-has-test">
  <div data-nstest-role="content">
	<p>Right padding on item 1 is OK (75px).</p>
	<p>Right padding on items 2 &amp; 3 should probably be around 30 or 35 (not 25).</p>
	<p>Right padding on item 4 should be 15px to match the left side.</p>
	<ol data-nstest-role="listview" data-nstest-inset="true">
	  <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
	  <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
	  <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
	  <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
	  <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
	</ol>
  </div>
</div>

</body>
</html>
